<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:true,message:'知识专区',liner:false}"></header-top>
		<view class="">
			<u-tabs :list="list1" :scrollable='true' lineColor="#FD463E" @click="clicktabtow" :activeStyle="{
			    color: ' #333333',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: '#999999',
						 fontWeight: 'bold',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
		</view>
		<view class="mainpadding2">
			<!-- 内容 -->
			<view class="kym" v-if="!list.data.length">
				<image src="../../static/image/system/zwwt.png" mode=""></image>
			</view>
			<view class="mainpadding ffffff radius margin_top" v-for="item in list.data" :key="item.id" @click="todetail(item.id)">
				<view class="titletext">{{item.title}}</view>
				<view class="xiahuax"></view>
				<view class="flexbetween">
					<view class="huisetext">{{item.createtime_text}}</view>
					<view class="flexright margin_top">
						<view class="huisetext margin_right1">查看详情</view>
						<view class="huiyoujt"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currenttabtow: 0,
				list1: [],
				typeId:'',
				page:1,
				limit:20,
				list:{
					data:[],
				},
			}
		},
		onLoad() {
			this.getfenlei();
		},
		methods: {
			todetail(id){
				uni.navigateTo({
					url:'/pages/mypage/wentixq?id=' + id,
				})
			},
			getdata(isPage,page){
				let _this = this;
				httpRequest.request('api/zszq/zszqList','POST',{
					page:page||1,
					limit:_this.limit,
					zszq_category_id:_this.typeId,
				}).then(res => {
					if(res.code == 1){
						let resList = res.data.data;
						if (isPage == true) {
							_this.list.data.push(...resList);
						} else {
							_this.list = res.data
							_this.list.data = resList;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.total <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getdata(true, page);
			},
			getfenlei(){
				let _this = this;
				httpRequest.request('api/zszq/zszqCategory','POST',{
				}).then(res => {
					if(res.code == 1){
						console.log(res);
						_this.list1 = res.data.reverse();
						_this.typeId = res.data[0].id;
						_this.getdata();
					}
				})
			},
			clicktabtow(e) {
				this.typeId = e.id;
				this.getdata();
				this.currenttabtow = e.index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.kym {
		margin: 250rpx auto 0;
		width: 419rpx;
		height: 375rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
	.titletext{
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
</style>
